<script setup>
import {ref, reactive, computed, watch, watchEffect, getCurrentInstance} from 'vue'

const count = ref(0)

defineProps({
  msg: String
})

const person = reactive({
  name: '张三',
  age: 18,
  hobby: ['抽烟', '学习', '逛街']
})

const changePerson = () => {
  person.name = '李四'
  person.hobby[0] = '看电影'
}

const addAge = () => {
  person.age ++;
}
/*
*   情况一: 监视 ref 所定义的一个响应式数据
*   watch(sum, (newValue, oldValue) => {}, {immediate: true})
*
*   情况二: 监视 ref 所定义的多个响应式数据
*   watch([sum, msg], (newValue, oldValue) => {}, {immediate: true})
*
*   情况三: 监视 reactive 所定义的一个响应式数据
*     1. 注意: 此处无法正确获取 oldValue
*     2. 注意: 强制开启了深度监视 (deep配置无效)
*/
watch(person, ((value, oldValue) => {
  console.log('person发生变化了:', oldValue, value)
}, {deep: false}))

watchEffect(() => { // watchEffect 监听局部, watch 使用就会监听整体
  const age = person.age;
  console.log('age update', age)
})

let firstName =  ref('张')
let lastName = ref('三')
let fullName = computed(() => {
  return firstName.value + " " + lastName.value
})
</script>

<template>
  <input type="text" v-model="firstName"/>
  <input type="text" v-model="lastName"/>
  <input id="content" type="text" v-model="fullName"/>
  <h1 id="title">{{ msg }}</h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2>兴趣: {{person.hobby}}</h2>
  <button @click="addAge">增加年龄</button>
  <br><br>
  <button @click="changePerson">修改名字, 年龄, 兴趣</button>
</template>

<style scoped>
:deep(a) {
  color: #42b983;
}
</style>
